<template>
  <div class="spot-main">
    <div class="left">
      <img v-lazy="publicUrl(`/images/fabric-1.jpg`)" />
    </div>
    <div class="right">
      <div class="top">
        <div class="tag">30天热销</div>
        <div class="title overOneSpec">男士衬衣长袖衬衫男男士衬衣长袖衬衫</div>
      </div>

      <div class="second">
        <div class="part">
          <img
            :src="publicUrl(`/images/spot-masonry.png`)"
            v-for="index of 4"
          />
          <img
            :src="publicUrl(`/images/spot-masonr-black.png`)"
            v-for="index of 1"
          />
        </div>
        <div class="part">2000+条评价</div>
        <div class="part">90天内300+件成交</div>
      </div>

      <div class="third">
        <div class="third-left">价格起批量</div>
        <div class="third-right">
          <div class="third-right-part">
            <span>￥39.00</span>
            <span>1-10米</span>
          </div>
          <div class="third-right-part">
            <span>￥36.00</span>
            <span>11-50件</span>
          </div>
          <div class="third-right-part">
            <span>￥34.00</span>
            <span>51米以上</span>
          </div>
        </div>
      </div>

      <div class="four">
        <div class="four-left">优惠</div>
        <div class="four-right">
          <Select
            :options="[
              { label: `优惠300`, value: 1 },
              { label: `优惠500`, value: 2 },
            ]"
            :size="`.0833rem`"
            :searchable="true"
            :placeholder="`请选择优惠券`"
            label="label"
            :border="true"
            :reduce="(option) => option.value"
            :clearable="true"
            v-model:value="couponValue"
          />
        </div>
      </div>

      <div class="five">
        <div class="five-left left-text">服务</div>
        <div class="five-right">48小时发货·极速退款·材质保障</div>
      </div>

      <div class="six">
        <div class="six-left left-text">物流</div>
        <div class="six-right">
          <span class="text-blod">浙江省金华市</span>&nbsp;&nbsp;<span
            class="text-gray text-blod"
            >至</span
          >&nbsp;

          <div class="distpicker">
            <VDistpicker
              :province="select.province"
              :city="select.city"
              hide-area
              class="distpicker"
              @province="(event:any)=>onChange(event,'province')"
              @city="(event:any)=>onChange(event,'city')"
            />
          </div>
          <span class="text-blod"
            ><span class="text-gray-light font-light">&nbsp;|&nbsp;&nbsp;</span
            >运费:￥0起
            <span class="text-gray-light font-light">&nbsp;|&nbsp;</span>
            承诺付款后48小时内发货</span
          >
        </div>
      </div>

      <div class="dir"></div>

      <div class="senven">
        <div class="senven-left left-text">下单米数</div>
        <div class="senven-right">
          <div :class="['senven-right-part']">
            <input v-model="meter" placeholder="请输入米数" />
          </div>
        </div>
      </div>

      <div class="senven">
        <div class="senven-left left-text">下单价格</div>
        <div class="senven-right-text">
          <span> ￥{{ twoFixed(39) }} </span>
        </div>
      </div>

      <div class="dir"></div>

      <div class="buttons">
        <div class="button thumb">立即订购</div>
        <div class="button thumb">加采购车</div>
        <div class="small">
          <img
            class="thumb"
            v-debounce="() => (is_coll = !is_coll)"
            :src="
              publicUrl(
                is_coll ? `/images/collect.png` : `/images/collect-black.png`
              )
            "
          /><span>收藏(891)</span>
        </div>
      </div>
    </div>
  </div>
  <GoodsComment />
</template>
<script setup lang="ts" name="">
import { publicUrl, twoFixed } from "@/utils/util";
import { ref, reactive } from "vue";
import Select from "@/components/Select/index.vue";
import VDistpicker from "v-distpicker";
import GoodsComment from "@/components/GoodsComment/index.vue";

interface Size {
  title: string;
  price: number;
  stock: number;
  buyNum: number;
}

// interface DataSouce {
//   spec: Array<{
//     img: string;
//     title: string;
//     size: Array<Size>;
//   }>;
// }

const couponValue = ref<number | undefined>(undefined);

const meter = ref<string>("");

const select = reactive<{
  province: string;
  city: string;
}>({ province: "", city: "" });

const onChange = (
  data: {
    value: string;
    code: string;
  },
  key: "province" | "city"
) => {
  select[key] = data.code === "" ? "" : data.value;
};

const is_coll = ref<boolean>(false);


</script>
<style scoped lang="scss">
@media screen and (min-width: $pc-min-width) {
  @import "./pc.scss";
}
</style>
